import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 导入vue-resource包
import VueResource from 'vue-resource'
// 导入全局数据仓储vuex包
import Vuex from 'vuex'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(Vuex)

// vue-resource全局配置
Vue.http.options.root = 'http://www.liulongbin.top:3005';
Vue.http.options.emulateJSON = true;

// 获取本地浏览器数据
var car = JSON.parse(localStorage.getItem("car") || '[]')
// 创建去全局数据仓储对象
var store = new Vuex.Store({
  state: {
    car: car
  },
  mutations: {
    setShopcar(state, goodsinfo){    // 更新购物车货物的数量
      var flag = false
      state.car.forEach(item => {
        if(item.id === goodsinfo.id){
          item.count += goodsinfo.count
          flag = true
        }
      })
      if(!flag){
        state.car.push(goodsinfo)
      }
      // 将数据存储到本地浏览器
      localStorage.setItem("car", JSON.stringify(state.car))
    },
    updateGoodsCount(state, goodsinfo){   // 更新货物数量
      state.car.some(item => {
        if(item.id == goodsinfo.id){
          item.count = parseInt(goodsinfo.count)
          return true
        }
      })
      localStorage.setItem("car", JSON.stringify(state.car))
    },
    updateSelectedStatus(state, goodsStatus){   // 更新开关状态
      state.car.some(item => {
        if(item.id == goodsStatus.id){
          item.selected = goodsStatus.status
        }
      })
      localStorage.setItem("car", JSON.stringify(state.car))
    }
  },
  getters: {
    getAllCount(state){   // 获取购物车中货物的总数量
      var count = 0
      state.car.forEach(item => {
        count += item.count
      })
      return count
    },
    getGoodsCount(state){   // 获取对应货物的数量
      var goods = {}
      state.car.forEach(item => {
        goods[item.id] = item.count
      })
      return goods
    },
    getStatus(state){   // 获取开关状态
      var goodsStatus = {}
      state.car.forEach(item => {
        goodsStatus[item.id] = item.selected
      })
      return goodsStatus
    },
    getAllPrice(state){  // 计算件数和总价格
      var goods_num_price = {
        "count": 0,
        "price": 0
      }
      state.car.forEach(item => {
        if(item.selected){
          goods_num_price["count"] += item.count
          goods_num_price["price"] += item.price * item.count
        }
      })
      return goods_num_price
    }
  }
})
// 导入 MUI 的样式表， 和 Bootstrap 用法没有差别
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

// 导入字体
import './lib/mui/fonts/mui-icons-extra.ttf'

// 按需导入 Mint-UI组件
// import { Header, Swipe, SwipeItem, Button } from 'mint-ui'
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);

// 全部加载
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// 导入过滤器的包
import moment from 'moment'
Vue.filter("dataFormat", function(dataStr, pattern = "YYYY-MM-DD HH:mm:ss"){
  return moment(dataStr).format(pattern)
})

// 导入缩略图插件
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

// 导入 app 组件
import app from './App.vue'

// 导入 自定义路由模块
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router, // 4. 将路由对象挂载到 vm 上
  store
})
